<script setup lang="ts">
import heightImg from '@/assets/image/collection/firefight/measure/height.png'
import distanceImg from '@/assets/image/collection/firefight/measure/distance.png'
import acreageImg from '@/assets/image/collection/firefight/measure/acreage.png'
import clearImg from '@/assets/image/collection/firefight/measure/clear.png'
import { handleHeightMeasure, handleAcreageMeasure, handleDistanceMeasure } from '@/utils'
interface MeasureType {
  imgUrl: string
  label: string
  type: string
}
const measureToolList = ref<Array<MeasureType>>([
  { imgUrl: heightImg, label: '测高', type: 'height' },
  { imgUrl: distanceImg, label: '测距', type: 'distance' },
  { imgUrl: acreageImg, label: '测面积', type: 'acreage' },
  { imgUrl: clearImg, label: '清空', type: 'clear' },
])

const chemicalStore = useChemicalStore()
const firefightPlotStore = useFirefightPlotStore()

const clearMeasureLabel = () => {
  window.GPoint.removeByPatName('measureMarker')
  window.GPolyline.removeByPatName('measureMarker')
  window.GPolygon.removeByPatName('measureMarker')

  // TODO 清除当前 cesium 原生上图
  firefightPlotStore.currentMeasureMarkerEntity?.forEach((item: any) => {
    window.map3DControl.viewer.entities.remove(item)
  })
}

const handleMeasureOperation = (data: MeasureType) => {
  if (data.type !== 'clear') {
    chemicalStore.tipsPageShow = true
    chemicalStore.currentFactorInfo = {
      name: data.label,
      type: 'scrollWall',
      id: '',
    }
  }
  switch (data.type) {
    case 'height':
      handleHeightMeasure()
      break
    case 'distance':
      handleDistanceMeasure()
      break
    case 'acreage':
      handleAcreageMeasure()
      break
    case 'clear':
      clearMeasureLabel()
      break
    default:
      break
  }
}
</script>
<template>
  <div class="measure-container">
    <div
      v-for="measure in measureToolList"
      :key="measure.type"
      class="measure-type"
      @click="handleMeasureOperation(measure)"
    >
      <img class="w-30px h-30px" :src="measure.imgUrl" :title="measure.label" />
      <div v-if="measure.type === 'acreage'" class="split-line"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.measure-container {
  @apply flex flex-row items-center justify-around;
  @apply absolute top-112px left-20px z-99;
  width: 230px;
  height: 40px;
  background: rgba(1, 7, 17, 0.8);
  padding: 5px;
  box-sizing: border-box;
}

.measure-type {
  @apply flex flex-row cursor-pointer;
}
</style>
